<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>坦克</title>
    <style>
        *{
           margin: 0px;
           padding: 0px; 
        }
        .top{
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid black;
            padding-left: 500px;
        }
        .bottom{
            width: 1400px;
            height: 600px;
            border: 1px solid black;
            margin: 50px;
        }
        span{
            color: red;
            font-size: 24px;
            font-weight: bold;
            margin-left: 10px;
        }
        img{
            position: relative;
        }
    </style>
    <script>
        window.onload=function(){
            //获取元素
            var btns=document.getElementsByTagName('button');
            var imgs=document.images;
            var span=document.getElementsByTagName('span')[0];

            //手动移动
            btns[0].onclick=function(){
                imgs[0].style.left=imgs[0].offsetLeft+20+'px';
                if(imgs[0].offsetLeft>=1270){
                    imgs[0].style.left=1270+'px';
                }
            }

            //发射
            btns[1].onclick=function(){
                var id=setInterval(function(){
                    span.innerHTML=--span.innerHTML;
                    if(span.innerHTML==0){
                        clearInterval(id);
                        var random1=parseInt(Math.random()*500);
                        var random2=parseInt(Math.random()*500);
                        imgs[0].style.left=random1+'px';
                        imgs[1].style.left=random2+'px';
                    }
                },1000)
            }

            //赛跑
            btns[2].onclick=function(){
                var id=setInterval(function(){
                    var random1=parseInt(Math.random()*50);
                    var random2=parseInt(Math.random()*50);
                    imgs[0].style.left=imgs[0].offsetLeft+random1+'px';
                    imgs[1].style.left=imgs[1].offsetLeft+random2+'px';
                    if(imgs[0].offsetLeft>=1280 || imgs[1].offsetLeft>=1280){
                        clearInterval(id);
                        if(imgs[0].offsetLeft>imgs[1].offsetLeft){
                            alert('坦克一赢了！')
                        }else{
                            alert('坦克二赢了！')
                        }
                    }
                },500)
            }

            //自动移动
            btns[3].onclick=function(){
                var id0=setInterval(function(){
                    imgs[0].style.left=imgs[0].offsetLeft+10+'px';
                    if(imgs[0].offsetLeft>=1270){
                        clearInterval(id0);
                        imgs[0].src='./9-17归档/坦克练习 间歇和超时调用/tanke_down.jpg';
                        var id1=setInterval(function(){
                            imgs[0].style.top=imgs[0].offsetTop+10+'px';
                            if(imgs[0].offsetTop>=550){
                                clearInterval(id1);
                                imgs[0].src='./9-17归档/坦克练习 间歇和超时调用/tanke_left.jpg';
                                var id2=setInterval(function(){
                                    imgs[0].style.left=parseInt(imgs[0].style.left)-10+'px';
                                    if(imgs[0].offsetLeft<100){
                                        clearInterval(id2);
                                        imgs[0].src='./9-17归档/坦克练习 间歇和超时调用/tanke_up.jpg';
                                    }
                                },100)
                            }
                        },100)
                    }
                },100)
            }
        }
    </script>
</head>
<body>
    <div class="top">
        <button>手动移动</button>
        <button>发射</button>
        <button>赛跑</button>
        <button>自动移动</button>
        <span>5</span>
    </div>
    <div class="bottom">
        <img src="./9-17归档/坦克练习 间歇和超时调用/tanke_right.jpg" alt="">
        <br>
        <!-- <img src="./9-17归档/坦克练习 间歇和超时调用/tanke_right.jpg" alt=""> -->
    </div>
</body>
</html>